<template>
	<view class="content">
		<image class="image" src="../../static/images/index/banner3.png"></image>
		<view class="information">
			<view class="header-left">
				<view class="line"></view> 热改楼盘
			</view>
			<image class="information-share" src="../../static/images/icon/share.png"></image>
		</view>
			<view class="information-text-list">
				<text class="text-list1">地 区</text>
				<text class="text-list">芙蓉区</text>
			</view>
			<view class="information-text-list">
				<text class="text-list">楼盘名称</text>
				<text class="text-list">融圣国际</text>
			</view>
			<view class="information-text-list">
				<text class="text-list1">户 型</text>
				<text class="text-list">150m²</text>
			</view>
		<view class="position">
			<view class="line"></view> 地理位置
		</view>
		<view class="map-size">
			<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">
			</map>
		</view>
		<view class="case-background">
			<view class="position">
			 <view class="line"></view> 案例展示
		    </view>
			<view class="case">
				<view class="case-left">
					<image class="case-image" src="../../static/images/index/case.png"></image>
					<view class="case-details">
						<view class="case-details-text">30m²</view>
					</view>
				</view>
				<view class="case-right">
					<image class="case-image" src="../../static/images/index/case.png"></image>
					<view class="case-details">
						<view class="case-details-text">30m²</view>
					</view>
				</view>
			</view>
			<view class="case">
				<view class="case-left">
					<image class="case-image" src="../../static/images/index/case.png"></image>
					<view class="case-details">
						<view class="case-details-text">30m²</view>
					</view>
				</view>
				<view class="case-right">
					<image class="case-image" src="../../static/images/index/case.png"></image>
					<view class="case-details">
						<view class="case-details-text">30m²</view>
					</view>
				</view>
			</view>
			<button class="button"><view class="text-button">确定预约</view></button>
		</view>
		<view class="tabber">
			<navigator url="index" open-type="switchTab" hover-class="other-navigator-hover">
				<view class="tabber-sy">
					<image class="tabber-image" src="../../static/images/icon/home_select.png"></image>
					<view class="image-text">首页</view>
				</view>
			</navigator>
			<navigator url="../appointment/index" open-type="switchTab" hover-class="other-navigator-hover">
				<view class="tabber-sy">
					<image class="tabber-image" src="../../static/images/icon/time_unselect.png"></image>
					<view class="image-text">预约</view>
				</view>
			</navigator>
			<navigator url="../my/index" open-type="switchTab" hover-class="other-navigator-hover">
				<view class="tabber-sy">
					<image class="tabber-image" src="../../static/images/icon/me_unselect.png"></image>
					<view class="image-text">我们</view>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
				return {
					id:0, // 使用 marker点击事件 需要填写id
					title: 'map',
					latitude: 39.909,
					longitude: 116.39742,
					covers: [{
						latitude: 39.909,
						longitude: 116.39742,
						iconPath: '../../../static/location.png'
					}, {
						latitude: 39.90,
						longitude: 116.39,
						iconPath: '../../../static/location.png'
					}]
				}
			},
		methods: {
			
		}
	}
</script>

<style>
.content {
		width: 100vw;
		height: 100vh;
		background-color: #F5F5F5;
		box-sizing: border-box; //盒子模型
	}
	.image{
		width: 750rpx;
		height: 450rpx;
	}
	.banner-swiper {
		width: 100%;
		height: 450rpx;
	}
	
	.banner-image {
		width: 100%;
		height: 100%;
	}
	.information{
		margin-top: 40rpx;
		margin-left: 40rpx;
		margin-right: 40rpx;
		box-sizing: border-box;
		justify-content: space-between;
		display: flex;
	}
	.header-left {
		font-size: 28rpx;
		font-weight: 700;
		color: #333333;
		line-height: 28rpx;
		display: flex;
		align-items: center;
		
	}
	.line {
		width: 6rpx;
		height: 28rpx;
		background: #3d9c36;
		margin-right: 20rpx;
	}
	.information-share{
		width: 40rpx;
		height: 40rpx;
	}
	.information-text-list{
		margin-top: 20rpx;
		margin-left: 40rpx;
	}
	.text-list{
		margin-right: 40rpx;
	}
	.text-list1{
		margin-right: 40rpx;
		letter-spacing: 18rpx;
	}
	.position{
		margin-top: 40rpx;
		margin-left: 40rpx;
		font-size: 28rpx;
		font-weight: 700;
		color: #333333;
		line-height: 28rpx;
		display: flex;
		align-items: center;
	}
	.map-size{
		margin-top: 20rpx;
		margin-left: 40rpx;
		margin-right: 40rpx;
		width: 670rpx;
		height: 406rpx;
	}
	.case-background{
		background-color: #F5F5F5;
		position: absolute;
		
	}
	.case{
		margin-top: 20rpx;
		margin-left: 40rpx;
		margin-right: 22rpx;
		box-sizing: border-box;
		overflow-x: scroll;
		display: flex;
	}
	.case-left{
		margin-right: 20rpx;
	}
	
	.case-image{
		width: 324rpx;
		height: 200rpx;
		
	}
	.case-details{
		width: 324rpx;
		height: 50rpx;
		background: #ffffff;
		border-radius: 0rpx 0rpx 12rpx 12rpx;
		box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(0,0,0,0.10); 
		position: relative;
		bottom: 5rpx;
	}
	.case-details-text{
		text-align: center;
		
	}
	.case-details-text::after{
		content: "—";
		font-size: 24rpx;
		font-weight: 500;
		color: #3d9c36;
	}
	.case-details-text::before{
		content: "—";
		font-size: 24rpx;
		font-weight: 500;
		color: #3d9c36;
	}
	.button{
		margin-top: 100rpx;
		margin-bottom: 100rpx;
		width: 328rpx;
		height: 80rpx;
		background: #3d9c36;
		border-radius: 8rpx;
	}
	.text-button{
		color: #ffffff;
	}
	.tabber{
		box-sizing: border-box;
		justify-content: space-around;
		align-items: center;
		display: flex;
		width: 100%;
		height: 112rpx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		z-index: 100;
		font-size: 30rpx;
		color: #999999;	
	}
	.tabber-image{
		width: 70rpx;
		height: 70rpx;
	}
	.image-text{
		font-size: 20rpx;
		font-weight: 500;
		color: #9ea7b4;
		line-height: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>
